<template>
	<view>
		 <u-navbar
		 :placeholder="true"
		 :safeAreaInsetTop="true"
		 :fixed="true"
		 title="聊天设置"
		>
			<view
			class="u-nav-slot"
		     slot="left"
		    >
		        <u-icon
				@click="navTo('/pages/chat/chat',user.id)"
		        name="arrow-left"
		        size="19"
		         ></u-icon>
		    </view>
		</u-navbar>
		<uni-card>
			<view style="display: flex;">
				<view>
					<u-avatar
					:text="getAvatar(user)"
					shape="square" 
					bg-color="#0080FF"
					font-size="14"
					@click="navTo('/pages/book/addNewFriend/user-info',user.id)"
					:src="user.avaUrl"
					></u-avatar>
					<text>{{user.userName}}</text>
				</view>
					
				<view style="margin-left: 5%;">
					<view style="margin-left: 15%; width: 70%;height: 63%; background-color:#DDDDDD ;border-radius: 10rpx; ">
						<u-icon color="white" name="plus" top="13" size="14" style="margin-left: 33%;"></u-icon>
					</view>
					<text>发起群聊</text>
				</view>
			</view>
		</uni-card>
		
		<uni-card>
			<u-cell-group :border="false">
				<u-cell
				title="查找聊天记录"
				isLink
				@click="navTo('/pages/chat/chat-getChatHistory',user.id)"
				>		
				</u-cell>
			</u-cell-group>
			<view style="display: flex; margin-top: 5%;">
				<view style="font-size: 25rpx;">
					<u-icon name="photo" size="35" style="margin-left: 20%;"></u-icon>
					<text>图片及视频</text>
				</view>
				<view style="font-size: 25rpx;margin-left: 10%;">
					<u-icon name="file-text" size="35"></u-icon>
					<text style="margin-left: 15%;">文件</text>
				</view>
				<view style="font-size: 25rpx;margin-left: 12%;">
					<u-icon name="share-fill" size="35" ></u-icon>
					<text style="margin-left: 15%;">链接</text>
				</view>
				<view style="font-size: 25rpx;margin-left: 12%;">
					<u-icon name="arrow-upward" size="35" style="margin-left: 15%;"></u-icon>
					<text >置顶消息</text>
				</view>
			</view>
		</uni-card>
			
		<uni-card>
			<u-cell-group :border="false">
				<u-cell
				title="置顶会话"
				>
				<u-switch slot="right-icon" v-model="checked"></u-switch>
				</u-cell>
				<u-cell
				title="消息免打扰"
				>
				<u-switch slot="right-icon" v-model="checked1"></u-switch>
				</u-cell>
			</u-cell-group>
		</uni-card>
		
			<button class="clear" @click="show = true">清空聊天记录</button>
			
			<u-popup
			:show="show" 
			@close="show = false" 
			@open="show = true"
			mode="center"
			:round="10"
			>
				<view style="width: 500rpx; height: 100rpx;padding: 10%;">
					<text>是否清空聊天记录？</text>
					<view style="display: flex;justify-content:flex-end">
						<button class="cancel" @click="show = false">取消</button>
						<button class="submit" @click="clearChat()">确定</button>
					</view>
				</view>
			</u-popup>
			<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uToast:{
					type: 'loading',
					title: '正在加载',
					message: "正在加载",
					duration:10000,
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
				},
				show:false,
				user:{},
				checked:false,
				checked1:false,
			}
		},
		methods: {
			navTo(url,id){
				uni.navigateTo({
					url:url+'?id='+id
				})
			},
			getAvatar(user){
				let text = ''
				try{
					if(user.avaUrl == null|| user.avaUrl.length == 0){
						text = user.userName.slice(-2)
					}else{
						text = null
					}
					return text;
				}catch(e){
					
				}
			},
			clearChat(){
				this.showToast(this.uToast)
				uni.request({
					url:'http://localhost:8090/nailCampus/message/removeMessagesById/'+this.user.id,
					method:'GET',
					header:{
						"token":uni.getStorageSync('token')
					},
					success:res=>{
						this.uToast.type = 'default'
						this.uToast.title = '默认主题'
						this.uToast.message = res.data.data
						this.uToast.iconUrl = 'https://cdn.uviewui.com/uview/demo/toast/default.png'
						this.uToast.duration = 2000
						this.showToast(this.uToast)
						this.show = false
					}
				})
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
				})
			}
		},
		onLoad(options){
			uni.request({
				url:'http://localhost:8090/nailCampus/user/getUserById/'+options.id,
				method:'GET',
				success:res=>{
					this.user = res.data.data
				}
			})
		}
	}
</script>

<style scoped lang="less">
	.clear{
		margin-left: 4%;
		width: 92%;
		background-color: white;
		color: red;
		font-size: 30rpx;
		box-shadow: -1px -1px 3px 3px #DDDDDD;
	}
	button::after{
		border: none;
	}
	button:active{
		background-color: #DDDDDD;
	}
	.cancel{
		background-color: white;
		color: #0070d9;  
		margin-top: 8%; 
		font-size: 28rpx;
		height: 50rpx;
		line-height: 50rpx;
	}
	.submit{
		background-color: white;
		color: #0070d9;  
		margin-top: 8%; 
		font-size: 28rpx;
		height: 50rpx;
		line-height: 50rpx;
	}
</style>
